<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style type="text/css">
			body {
				background: #000000;
			}
			
			#oc {
				background: #FFFFFF;
			}
		</style>
	</head>

	<body>
		<canvas id="oc" width="640" height="960">
		</canvas>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script>
			function saveQR() {
				//生成base64图片数据
				var canvas = document.getElementsByTagName("canvas")[0];
				var dataUrl = canvas.toDataURL();
				var b = new plus.nativeObj.Bitmap();

				b.loadBase64Data(dataUrl, function() {
					console.log("创建成功");
					b.save('_doc/' + app.account() + '-qr.png', {
						overwrite: true,
						quality: 100
					}, function() {
						console.log("保存成功");
						plus.gallery.save('_doc/' + app.account() + '-qr.png', function() {
							console.log("保存图片到相册成功");
							mui.toast("二维码保存成功");
						}, function() {
							console.log("保存图片到相册失败");
						});
						b.clear();
					}, function() {
						console.log("保存失败");
						b.clear();
					});
				}, function() {
					console.log("创建失败");
				});
			};

			var Oc = document.getElementById("oc");
			var Gc = Oc.getContext("2d");
			var yImg = new Image();
			yImg.src = "images/qr.jpg";
			yImg.onload = function() {
				draw(this);
			};

			var qr = new Image();

			function draw(obj) {
				/*给某一个区域插入背景图片,并设置平铺方式*/
				var bg = Gc.createPattern(obj, "repeat");
				Gc.fillStyle = bg;
				Gc.fillRect(0, 0, 640, 960);
			};

			function drawQR(base64) {
				qr.src = base64;
				Gc.drawImage(qr, 463, 409, 134, 134); //插入图片
			}
		</script>
	</body>

</html>